<template>
  <div class="app-container">
    <div class="customContainer">
      <div class="title">采购单详情</div>
      <purchase-links :lineData="pLinks"></purchase-links>
      <div class="order_title">
        <span>订单信息</span>
        <div>
          <router-link style="margin-right:10px"
            :to="{name:'operation/category_order_indicator',params:{row:{store_name:res.store_name,store_id:res.store_id},global,routerflag:true}}">
            <el-button type="primary" size="mini">预估订货明细</el-button>
          </router-link>
          <router-link :to="{name:'warehouse/giftDetailModify',params :{routerflag:1,id,order_id:res.order_id,isLook,time:global.starttime,from:res.from,info}}">
            <el-button type="primary" size="mini">{{!isLook?"修改订单":"订单明细"}}</el-button>
          </router-link>
        </div>
      </div>
      <div class="order_info bor_bot_n">
        <el-row>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">采购单号：</div>
              <div>{{res.order_id}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">下单时间：</div>
              <div>{{res.create_time}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">下单人：</div>
              <div>{{res.nick}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">下单类型：</div>
              <div>{{res.type==1?"门店下单":"总部统配"}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">采购渠道：</div>
              <div>{{res.from==1?"供应商":"中央仓"}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">下单种类：</div>
              <div>{{res.species_num}} (种)</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">下单数量：</div>
              <div>{{res.all_num}} (个)</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">下单金额：</div>
              <div>{{res.all_money|keepTwoNum}} (元)</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">当前种类：</div>
              <div>{{res.now_species_num}} (种)</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">当前数量：</div>
              <div>{{res.now_all_num}} (个)</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">当前金额：</div>
              <div>{{res.now_all_money|keepTwoNum}} (元)</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">预估订货金额：</div>
              <div>{{res.forecast_money|keepTwoNum}}(元)</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag" :class="{danger:res.ratio>110}">累计订货金额及比例：</div>
              <div :class="{danger:res.ratio>110}">{{res.cumulative_money|keepTwoNum}} / {{res.ratio|keepTwoNum}}%</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div :class="{danger:res.ratio>110}" class="tag">预估订货差额：</div>
              <div :class="{danger:res.ratio>110}">{{res.diff|keepTwoNum}}(元)</div>
            </div>
          </el-col>
        </el-row>
        <div class="info_bot">
          <div class="tag">订单备注：</div>
          <div class="remark">
            <div v-show="res.gift_remark" style="margin-bottom:15px">{{res.gift_remark}}</div>
            <div v-show="res.remark">{{res.remark}}</div>
          </div>
        </div>
      </div>
      <div class="order_title">收货信息</div>
      <div class="rece_info bor_bot_n">
        <el-row>
          <el-col :span="8">
            <div class="info_item store info_bot">
              <div class="tag">收货门店：</div>
              <div class="remark">{{res.store_name}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">收货仓：</div>
              <div>{{res.house_name}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">收货人：</div>
              <div>{{res.name}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">收货人手机：</div>
              <div>{{res.phone}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">地区：</div>
              <div>{{res.prov_name}} / {{res.city_name}} / {{res.dist_name}}</div>
            </div>
          </el-col>
        </el-row>
        <div class="info_bot">
          <div class="tag">地址：</div>
          <div class="remark">
            <div>{{res.address}}</div>
          </div>
        </div>
      </div>
      <div class="order_title">最近操作</div>
      <div v-if="res.record" class="action_info">
        <div class="info_bot" style="margin-left:23px">{{res.record?res.record.create_time:""}} {{res.record?res.record.nick:""}}
          {{res.record.status|orderStatus(1)}}</div>
        <div v-show="res.record&&res.record.remark" style="margin-top:10px" class="info_bot">
          <div class="tag">审批意见：</div>
          <div class="remark big">
            {{res.record?res.record.remark:''}}
          </div>
        </div>
      </div>
    </div>
    <!-- 自定义底部 -->
    <div v-if="!isLook" class="bottom_box">
      <div class="pull-right">
        <el-button @click="operaOrder('close')" type="primary" size="small">关闭订单</el-button>
        <el-button @click="operaOrder('submitAgain')" type="primary" size="small">重新提交</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getPage, getList, setOrder, closeOrder, getInfo } from '@/api/warehouse/detailModeify';
import { getIndicators } from '@/api/common/commonApi';
import { getBuyOrderLines } from '@/utils';
export default {
  data() {
    return {
      orderStatus: null,
      isLook: true,
      // title: "采购单修改",
      info: {},
      pLinks: [],
      id: '',
      formInline: {
        status: '',
        store_id: '',
        id: '',
        type: ''
      },
      res: {
        order_id: '', //订单编号
        record: {}
      },
      route: { name: 'warehouse/detailModify' },
      global: { starttime: '' },
      saveData: { remark: '' },
      rules: {
        remark: [{ required: true, message: '请输入审批意见', trigger: 'blur' }]
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      if (vm.$route.params.routerflag) {
        vm.formInline.id = vm.$route.params.id; //采购单的id
        vm.orderStatus = vm.$route.params.orderStatus; //订单到哪一步的状态
        vm.formInline.type = vm.$route.params.type == '供应商' ? 1 : 2;
        vm.formInline.status = vm.$route.params.status == '门店下单' ? 1 : 3;
        vm.fatchData(vm.$route.params.id, vm.formInline.status, vm.formInline.type);
        vm.$refs['saveData'] && vm.$refs['saveData'].resetFields();
      }
      if (vm.$route.params.update) {
        vm.fatchData();
      }
    });
  },
  methods: {
    fatchData() {
      this.id = '';
      this.info = {};
      this.res = { order_id: '', record: {} };
      this.pLinks = [];
      getInfo({ order_id: this.formInline.id }).then(res => {
        this.id = this.formInline.id;
        res[0].forecast_money = 0;
        res[0].cumulative_money = 0;
        res[0].ratio = 0;
        res[0].diff = 0;
        this.res = res[0];
        this.isLook = this.res.status == '被打回' ? false : true;
        this.info = {
          house_name: this.res.house_name,
          store_name: this.res.store_name,
          house_id: this.res.house_id,
          store_id: this.res.store_id,
          name: this.res.name,
          phone: this.res.phone,
          city: this.res.city,
          dist: this.res.dist,
          prov: this.res.prov,
          city_name: this.res.city_name,
          dist_name: this.res.dist_name,
          prov_name: this.res.prov_name,
          address: this.res.address,
          remark: this.res.remark
        };
        if (this.res.record && this.res.record.status) {
          this.pLinks = getBuyOrderLines(this.res.record.status, this.res.is_coo, this.res.is_gm,this.res.type==1?0:1);
        }
        let date = this.res.create_time.split(' ')[0];
        this.global.starttime = new Date(
          Date.UTC(new Date(date).getFullYear(), new Date(date).getDate() < 9 ? new Date(date).getMonth() : new Date(date).getMonth() + 1)
        )
          .toISOString()
          .slice(0, 7);
        getIndicators({ store_id: this.res.store_id, datetime: this.global.starttime }).then(response => {
          if (response.code == 1) {
            this.res.forecast_money = response.data.forecast_money ? response.data.forecast_money / 1 : 0;
            this.res.cumulative_money = response.data.cumulative_money ? response.data.cumulative_money / 1 : 0;
            this.res.ratio = response.data.forecast_money/1>0 ? (response.data.cumulative_money / response.data.forecast_money) * 100 : 200;
            this.res.diff = response.data.cumulative_money - response.data.forecast_money;
          }
        });
      });
    },
    operaOrder(type) {
      if (type == 'close') {
        this.$confirm('确定要关闭吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          closeOrder({ id: this.formInline.id }).then(res => {
            if (res.code == 1) {
              this.$message.success(res.message);
              this.$store.dispatch('delVisitedViews', this.route).then(() => {
                this.$router.push({ name: 'warehouse/detailsearch', params: { routerflag: 1 } });
              });
            }
          });
        });
      } else if (type == 'submitAgain') {
        this.$confirm('确定提交?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          setOrder({ id: this.formInline.id }).then(res => {
            if (res.code == 1) {
              this.$message.success(res.message);
              this.$store.dispatch('delVisitedViews', this.route).then(() => {
                this.isShowAddCart = false;
                this.$router.push({ name: 'warehouse/detailsearch', params: { routerflag: 1 } });
              });
            }
          });
        });
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.customContainer {
  overflow-y: auto;
}
.title {
  font-size: 20px;
  font-weight: bold;
}
.order_info,
.rece_info,
.action_info {
  background: #fff;
  padding: 20px 5px;
  border: 1px solid #dcdfe6;
  .info_item {
    display: inline-block;
    width: 400px;
    margin-bottom: 20px;
    div {
      display: inline-block;
      color: #333;
    }
    .tag {
      width: 180px;
      color: #838383;
      text-align: right;
      margin-right: 10px;
    }
    .store {
      position: relative;
      .name {
        position: relative;
        top: 0px;
        left: 0px;
      }
    }
  }
  .info_bot {
    color: #333;
    div.remark {
      display: inline-block;
      width: calc(100% - 230px);
      div {
        word-wrap: break-word;
      }
    }
    div.remark.big {
      min-height: 70px;
    }
    div {
      color: #333;
    }
    .tag {
      color: #838383;
      display: inline-block;
      width: 180px;
      text-align: right;
      vertical-align: top;
      margin-right: 10px;
    }
  }
}
.rece_info,
.action_info {
  padding: 30px 5px;
}
.order_title {
  padding: 0px 20px;
  font-size: 18px;
  height: 48px;
  color: #97999d;
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bor_bot_n {
  border-bottom: none;
}
.bor_top_n {
  border-top: none;
}
.order_link {
  width: 1702px;
  height: 92px;
  border: 1px solid #dcdfe6;
  padding: 20px;
  margin: 20px 0;
  background-color: #fff;
}
</style>